<template>
  <div class="love-img-page">
    <div class="central">
      <div class="title">
        <h1>恋爱相册</h1>
        <p>记录最美瞬间</p>
      </div>
      
      <div class="row central central-800">
        <div class="card col-lg-12 col-md-12 col-sm-12 col-sm-x-12">
          <div class="love-img-content animated fadeInUp">
            <div class="gallery">
              <div 
                v-for="image in images" 
                :key="image.id" 
                class="gallery-item"
              >
                <div class="image-wrapper">
                  <img 
                    :src="image.url" 
                    :alt="image.title"
                    class="gallery-image spotlight"
                    @click="openImage(image)"
                  >
                  <div class="image-overlay">
                    <div class="image-title">{{ image.title }}</div>
                    <div class="image-date">{{ image.date }}</div>
                  </div>
                </div>
              </div>
            </div>
            
            <div v-if="images.length === 0" class="no-images">
              暂无相片，快来上传你们的美好回忆吧！
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图片查看器模态框 -->
    <div 
      v-if="showImageViewer" 
      class="image-viewer"
      @click="closeImageViewer"
    >
      <div class="viewer-content" @click.stop>
        <button class="close-button" @click="closeImageViewer">&times;</button>
        <img 
          :src="currentImage.url" 
          :alt="currentImage.title"
          class="viewer-image"
        >
        <div class="viewer-info">
          <h3>{{ currentImage.title }}</h3>
          <p>{{ currentImage.date }}</p>
          <p>{{ currentImage.description }}</p>
        </div>
        <div class="viewer-navigation">
          <button 
            class="nav-button prev" 
            @click.stop="prevImage"
            :disabled="currentImageIndex === 0"
          >
            &lt;
          </button>
          <button 
            class="nav-button next" 
            @click.stop="nextImage"
            :disabled="currentImageIndex === images.length - 1"
          >
            &gt;
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoveImageView',
  data() {
    return {
      images: [
        {
          id: 1,
          url: "https://img.gejiba.com/images/b0d44ed67e25235f552aacbe32d81b5c.jpg",
          title: "海边约会",
          date: "2024-05-20",
          description: "在海边看日落的美好时光"
        },
        {
          id: 2,
          url: "https://img.gejiba.com/images/f4b1de284e9dcb9057553642d9fee764.png",
          title: "第一次旅行",
          date: "2024-05-01",
          description: "我们一起去旅行的美好回忆"
        },
        {
          id: 3,
          url: "https://img.gejiba.com/images/7c5f1a655788c0d6ff0cae50232dde65.jpg",
          title: "生日惊喜",
          date: "2024-04-15",
          description: "为你准备的生日惊喜"
        },
        {
          id: 4,
          url: "https://img.gejiba.com/images/dbc7f2562e051afc3c39f916689ba5f0.png",
          title: "浪漫晚餐",
          date: "2024-03-10",
          description: "纪念日的浪漫晚餐"
        },
        {
          id: 5,
          url: "https://img.gejiba.com/images/7c5f1a655788c0d6ff0cae50232dde65.jpg",
          title: "冬日漫步",
          date: "2024-02-14",
          description: "情人节的冬日漫步"
        },
        {
          id: 6,
          url: "https://img.gejiba.com/images/b0d44ed67e25235f552aacbe32d81b5c.jpg",
          title: "春天赏花",
          date: "2024-01-30",
          description: "春暖花开时一起赏花"
        }
      ],
      showImageViewer: false,
      currentImage: {},
      currentImageIndex: 0
    }
  },
  methods: {
    openImage(image) {
      this.currentImage = image;
      this.currentImageIndex = this.images.findIndex(img => img.id === image.id);
      this.showImageViewer = true;
      document.body.style.overflow = 'hidden'; // 防止背景滚动
    },
    
    closeImageViewer() {
      this.showImageViewer = false;
      document.body.style.overflow = ''; // 恢复背景滚动
    },
    
    prevImage() {
      if (this.currentImageIndex > 0) {
        this.currentImageIndex--;
        this.currentImage = this.images[this.currentImageIndex];
      }
    },
    
    nextImage() {
      if (this.currentImageIndex < this.images.length - 1) {
        this.currentImageIndex++;
        this.currentImage = this.images[this.currentImageIndex];
      }
    }
  }
}
</script>

<style scoped>
.love-img-page {
  padding: 2rem 0;
}

.title {
  text-align: center;
  margin-bottom: 2rem;
}

.title h1 {
  font-size: 2rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.title p {
  color: #666;
}

.love-img-content {
  padding: 1.5rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.gallery-item {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-5px);
}

.image-wrapper {
  position: relative;
  overflow: hidden;
}

.gallery-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.gallery-item:hover .image-overlay {
  transform: translateY(0);
}

.image-title {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.image-date {
  font-size: 0.85rem;
  opacity: 0.8;
}

.no-images {
  text-align: center;
  color: #999;
  padding: 2rem 0;
  font-size: 1.1rem;
}

/* 图片查看器样式 */
.image-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.viewer-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1001;
}

.close-button:hover {
  background: rgba(0,0,0,0.8);
}

.viewer-image {
  max-width: 100%;
  max-height: 70vh;
  display: block;
  margin: 0 auto;
}

.viewer-info {
  padding: 1.5rem;
  text-align: center;
}

.viewer-info h3 {
  margin: 0 0 0.5rem;
  color: #333;
}

.viewer-info p {
  margin: 0.25rem 0;
  color: #666;
}

.viewer-navigation {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
}

.nav-button {
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-button:hover:not(:disabled) {
  background: rgba(0,0,0,0.8);
}

.nav-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .title h1 {
    font-size: 1.5rem;
  }
  
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }
  
  .gallery-image {
    height: 150px;
  }
  
  .viewer-content {
    max-width: 95%;
    max-height: 95%;
  }
  
  .viewer-image {
    max-height: 60vh;
  }
}
</style>
